<template>
  <div class="searchPopupSon">
    <div class="header">
      <span @click="$emit('set:Show')"></span>
      <p>品牌</p>
    </div>
    <ul>
      <li
        v-for="(item, index) in dataArr"
        :key="index"
        :title="item.title"
        :class="[proxy.Checkbox.indexOf(index) !== -1 ? 'active' : '']"
        @click="setCheckbox(item, index)"
      >
        <p>{{ item.value }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "searchPopupSon",
  props: ["proxy", "dataArr"],
  methods: {
    setCheckbox(item, index) {
      let indexOf = this.proxy.Checkbox.indexOf(index);
      if (indexOf === -1) {
        this.proxy.Checkbox.push(index);
        this.proxy && this.proxy.CheckboxName.push(item.value);
        this.proxy && this.proxy.CheckboxTitle.push(item.title);
      } else {
        this.proxy && this.proxy.Checkbox.splice(indexOf, 1);
        this.proxy && this.proxy.CheckboxName.splice(indexOf, 1);
        this.proxy && this.proxy.CheckboxTitle.splice(indexOf, 1);
      }
    }
  }
};
</script>
<style scoped>
.searchPopup .header {
  height: 1rem;
  margin: 0px;
  width: 100%;
  line-height: 1.02rem;
  text-align: center;
  font-size: 0.36rem;
  color: #333;
  background: #fff;
  border-bottom: 0.02rem solid #eee;
  position: relative;
}

.searchPopup .header span {
  line-height: 1rem;
  float: left;
  padding-left: 0.24rem;
  width: 10%;
  height: 1rem;
  background: url(//i1.ygimg.cn/pics/mobile/appointment/searchP/return.png)
    center center no-repeat;
  background-size: 0.2rem 0.4rem;
  box-sizing: content-box;
}

.searchPopup .header p {
  text-align: center;
  margin-right: 12%;
  display: inline-block;
}

ul li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0 0.24rem;
  margin: 0;
  border: none;
  border-bottom: 0.02rem solid #ddd;
  text-align: left;
  height: 0.88rem;
  line-height: 0.88rem;
  font-size: 0.28rem;
  color: #666;
}

ul li.active {
  color: #ff0000;
}

ul li.active p {
  text-align: left;
  background: url(//i1.ygimg.cn/pics/mobile/appointment/searchP/check.png) 95%
    center no-repeat;
  background-size: 0.3rem 0.2rem;
  margin-left: 0;
}
</style>